<template>
	<div class="main">
		<el-container class="main-content">
			<el-aside width="220px">
				<main-menu />
			</el-aside>
			<el-container>
				<el-header>
					<main-header />
				</el-header>
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>

import MainMenu from '@/components/main-menu/main-menu.vue'
import MainHeader from '@/components/main-header/main-header.vue'

</script>

<style lang="scss" scoped>
.main {
	height: 100%;

	.main-content {
		height: 100%;

		.el-aside {
			overflow-x: hidden;
			overflow-y: auto;
			text-align: left;
			background-color: #31a4ff;
			scrollbar-width: none;
			-ms-overflow-style: none;
			&::-webkit-scrollbar {
				display: none;
			}
		}
		.el-header {
			background-color: #ecf5ff;
		}
		.el-main {
			background-color: #fff;
		}
	}
}
</style>